<script setup lang="ts">
import { ref } from 'vue'

// 1. 创建响应式数据
const hp = ref(100)          // 英雄血量
const attacking = ref(false) // 是否正在攻击

// 2. 修改数据
const attack = () => {
  attacking.value = true
  setTimeout(() => {
    hp.value -= 20
    attacking.value = false
  }, 500)
}
</script>

<template>
  <div class="card">
    <h2>🌟 关卡 1｜ref：让"原始值"变成"响应式小精灵"</h2>
    
    <div class="game-container">
      <h3>勇者血量：{{ hp }}</h3>
      <div class="hp-bar">
        <div class="hp-fill" :style="{ width: hp + '%' }"></div>
      </div>
      <button @click="attack" :disabled="attacking" class="attack-btn">
        {{ attacking ? '攻击中...' : '发起攻击' }}
      </button>
    </div>
    
    <div class="explanation">
      <h4>📝 学习要点</h4>
      <ul>
        <li>ref 包裹基本类型（string / number / boolean）</li>
        <li>在模板或 computed 里直接裸用，在脚本里要 .value</li>
      </ul>
      <p class="funny">💡 趣味比喻：ref 像"魔法存钱罐"，外面看是一个整体，里面实际藏着金币（.value）。你摇一摇（修改.value），页面就会发光（更新）。</p>
    </div>
  </div>
</template>

<style scoped>
.game-container {
  margin: 2em 0;
}

.hp-bar {
  width: 100%;
  height: 30px;
  background-color: #444;
  border-radius: 15px;
  overflow: hidden;
  margin: 1em 0;
}

.hp-fill {
  height: 100%;
  background-color: #4caf50;
  transition: width 0.3s ease;
}

.attack-btn {
  background-color: #f44336;
  color: white;
  font-weight: bold;
}

.attack-btn:hover:not(:disabled) {
  background-color: #d32f2f;
}

.explanation {
  text-align: left;
  margin-top: 2em;
}

.funny {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 1em;
  border-radius: 8px;
  font-style: italic;
}
</style>